<%-- 
    Document   : gerente_GestionProyecto
    Created on : Apr 6, 2012, 2:03:38 PM
    Author     : Eol
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Gerente - Gestion Proyecto</title>
    <link href="Estilos/css/bootstrap.css" rel="stylesheet">
    <link type="text/css" rel="stylesheet" href="gantt/codebase/dhtmlxgantt.css">
    <script type="text/javascript" language="JavaScript" src="gantt/codebase/dhtmlxcommon.js"></script>
    <script type="text/javascript" language="JavaScript" src="gantt/codebase/dhtmlxgantt.js"></script>
    <script language="JavaScript" type="text/javascript">

    /*<![CDATA[*/

    function createChartControl(htmlDiv1){
        var gantt = new GanttChart();
        gantt.setImagePath("gantt/codebase/imgs/");
        gantt.setEditable(true);    
        gantt.showTreePanel(true);
        gantt.showContextMenu(true);
        gantt.showDescTask(true,'p,n,e,d');// p - percentCompleted,n - name,e - est, d - duration
        gantt.showDescProject(true,'n,s,d,p');// p - percentCompleted,n - name,s - start date, d - duration
        gantt.create(htmlDiv1);   
        gantt.loadData("gantt/data/data.xml",true,true);  		
	}
    </script>
    <style type="text/css" media="screen">
  #fondo {
            height: 400px;  
            margin: auto;
            background: -webkit-gradient(linear, 0 0, 0 100%, from(#f18b01),  to(#ffffff));
        }
</style>
</head>

<body onload="createChartControl('GanttDiv');">
	<div id="fondo" class="container" style="width: auto;">
    	<div class="row" style="position:absolute;top:15px;left:200px">
      		<div class="span2">
        		<div class="row">
      				<img src="http://placehold.it/189x93" alt="">
    			</div>
  			</div>
			<div class="span5">
    			<div class="page-header">
  					<h1>Nombre del proyecto</h1>
  					<h3>Bienvenido : Nombre</h3>
            		<h4>Gerente</h4>
				</div>  
			</div>
            <div class="span3">
    			<div class="page-header">
                	<div class="btn-group">
						<a class="btn btn-warning">Cambiar contraseña</a>
  						<a href="index.jsp" class="btn btn-info">Salir»</a>
                    </div>
				</div>  
			</div>
        </div>
    </div>
	<div class="subnav" style="position:absolute;top:130px;left:170px">
		<ul class="nav nav-pills">
			<li class="dropdown active"><a href="#">Gestion del Proyecto</a></li>
			<li class=""><a href="gerente_AdministracionColaboradores.jsp">Administracion de Colaboradores</a></li>
			<li class=""><a href="gerente_Recursos.jsp">Recursos</a></li>
			<li class=""><a href="#badges">Reportes</a></li>
		</ul>
	</div>
	<div class="btn-group" style="position:absolute;top:180px;left:170px">
		<button class="btn">Crear Flujo</button>
		<button data-toggle="modal" class="btn" href="#editarTarea">Editar tarea</button>
		<a href="crearProyecto.jsp" class="btn" >Crear nuevo proyecto</a>
	</div>
        <div class="row" style="position:absolute;top:250px;left:210px">
		<div style="width:950px;height:620px;position:absolute;" id="GanttDiv"></div>
	</div>
	<div id="editarTarea" class="modal hide fade in" style="display: none; ">
        <div class="modal-header">
			<a class="close" data-dismiss="modal">×</a>
			<h3>Editar Tarea</h3>
        </div>
		<ul id="tab" class="nav nav-tabs">
			<li class="active"><a href="#informacion" data-toggle="tab">Informacion</a></li>
			<li class=""><a href="#colaboradores" data-toggle="tab">Colaboradores</a></li>
			<li class=""><a href="#recursos" data-toggle="tab">Recursos</a></li>
			<li class=""><a href="#entregables" data-toggle="tab">Entregables</a></li>    
		</ul>
        <div class="modal-body">
			<div id="tabEditarTarea" class="tab-content">
				<div class="tab-pane fade active in" id="informacion">
					<div class="row">
						<div class="span2">
							<h2>Codigo:</h2>
							<br/>
							Nombre de la tarea:
							<input name="nombre_proyecto" class="input-small" type="text" data-provide="typeahead">
							<br/>
							<p><h2>Flujo:</h2></p>
							<p><h3>Actividad:</h3></p>
							<br/>
							<p><h3>Tareas predecesoras:</h3></p>
							<form class="well form-inline">
								Agregar tarea:<input class="input-small" name="agregar tarea" type="text" data-provide="typeahead">
							</form>
							<select multiple="multiple" id="multiSelect">
								<option>1</option>
								<option>2</option>
								<option>3</option>
								<option>4</option>
								<option>5</option>
							</select>
						</div>
						<div class="span1 offset1">
							<p>Duracion:</p>
							<input class="input-small" name="duracion" type="text" data-provide="typeahead">
						</div>
						<div class="span3">
							<form class="well form-inline">
								<p>Fecha(Dia/Mes/Año</p>
								<select class="span1">
									<option>1</option>
									<option>2</option>
									<option>3</option>
									<option>4</option>
									<option>5</option>
								</select>
								<select class="span1">
									<option>1</option>
									<option>2</option>
									<option>3</option>
									<option>4</option>
									<option>5</option>
								</select>
								<select class="span1">
									<option>1</option>
									<option>2</option>
									<option>3</option>
									<option>4</option>
									<option>5</option>
								</select>
								<p>
								<P>
								Porcentaje completado:
								<div class="input-append">
									<input class="span1" name="porcentaje" size="16" type="text"><span class="add-on">%</span>
								</div>
								<p>
								<div class="progress progress-striped active">
									<div class="bar" style="width: 10%;"></div>
								</div>
							</form>
						</div>
						<div class="span5">
								<h4>Descripcion:</h4>
								<p>
								<textarea class="input-xlarge" name="descripcion" rows="4" style="margin-left: 0px; margin-right: 0px; width: 350px; margin-top: 0px; margin-bottom: 0px; height: 80px; " data-provide="typeahead"></textarea>
								<p>
								<p>
								<a href="#" class="btn btn-warning" name="guardar" type="sumit" style="position:relative;left:250px">Guardar</a>
								<a href="#" class="btn btn-info" data-dismiss="modal" style="position:relative;left:250px">Cancelar</a>
						</div>
					</div>
				</div>
				<div class="tab-pane fade" id="colaboradores">
					<div class="row">
						<div class="span3">
							<h2>Nombre de tarea:</h2>
						</div>
						<div class="span5">
							<div class="page-header">
								<h1>Colaboradores Disponibles:</h1>
								<br/>
								<a href="#" class="btn btn-warning" name="asig_tarea" type="sumit" style="position:relative;left:280px">Asignar a tarea</a>
								<a href="#" class="btn btn-info" name="detalles" type="sumit" style="position:relative;left:290px">Ver detalles</a>
							</div>
							<table class="table">
								<thead>
									<tr>
										<th>Sel</th>
										<th>ID</th>
										<th>Colaborador</th>
										<th>Cargo</th>
										<th>Correo</th>
									</tr>
								</thead>
								<tbody>
									<tr>
										<td><input type="checkbox"></td>
										<td>Mark</td>
										<td>Otto</td>
										<td>@mdo</td>
										<td>sg@gmail</td>
									</tr>
									<tr>
										<td><input type="checkbox"></td>
										<td>Mark</td>
										<td>Otto</td>
										<td>@mdo</td>
										<td>sg@gmail</td>
									</tr>
									<tr>
										<td><input type="checkbox"></td>
										<td>Mark</td>
										<td>Otto</td>
										<td>@mdo</td>
										<td>sg@gmail</td>
									</tr>
									<tr>
										<td><input type="checkbox"></td>
										<td>Mark</td>
										<td>Otto</td>
										<td>@mdo</td>
										<td>sg@gmail</td>
									</tr>
								</tbody>
							</table>
							<p>
							Colaboradores de esta tarea:
							<p>
							<select multiple="multiple" id="multiSelect">
								<option>1</option>
								<option>2</option>
								<option>3</option>
								<option>4</option>
								<option>5</option>
							</select>
							<a href="#" class="btn btn-warning" name="retirar" type="sumit" >Retirar</a>
							<p>
							<a href="#" class="btn btn-warning" name="aceptar" type="sumit" style="position:relative;left:350px">Aceptar</a>
							<a href="#" class="btn btn-info" data-dismiss="modal" style="position:relative;left:360px">Cerrar</a>
						</div>
					</div>
				</div>
				<div class="tab-pane fade" id="recursos">
					<div class="row">
						<div class="span3 ">
							<h2>Nombre de tarea:</h2>
						</div>
						<div class="span" >
							<div class="page-header">
								<h1>Recursos Disponibles:</h1>
								<a href="#" class="btn btn-warning" name="asig_tarea" type="sumit" style="position:relative;left:400px">Asignar a tarea</a>
							</div>
							<table class="table">
							<thead>
								<tr>
									<th>Sel</th>
									<th>ID</th>
									<th>Recurso</th>
									<th>Ilimitado</th>
									<th>Cantidad</th>
								</tr>
							</thead>
							<tbody>
							<tr>
								<td><input type="checkbox"></td>
								<td>001</td>
								<td>PC</td>
								<td>si</td>
								<td>1000</td>
							</tr>
							<tr>
								<td><input type="checkbox"></td>
								<td>001</td>
								<td>PC</td>
								<td>si</td>
								<td>1000</td>
							</tr>
							<tr>
								<td><input type="checkbox"></td>
								<td>001</td>
								<td>PC</td>
								<td>si</td>
								<td>1000</td>
							</tr>
							<tr>
								<td><input type="checkbox"></td>
								<td>001</td>
								<td>PC</td>
								<td>si</td>
								<td>1000</td>
							</tr>
							</tbody>
							</table>
							<p>
							Recursos de esta tarea:
							<p>
							<select multiple="multiple" id="multiSelect">
								<option>1</option>
								<option>2</option>
								<option>3</option>
								<option>4</option>
								<option>5</option>
							</select>
							<a href="#" class="btn btn-warning" name="retirar" type="sumit" >Retirar</a>
							<p>
							<a href="#" class="btn btn-warning" name="aceptar" type="sumit" style="position:relative;left:350px">Aceptar</a>
							<a href="#" class="btn btn-info" data-dismiss="modal" style="position:relative;left:360px">Cerrar</a>
						</div>
					</div>
				</div>
				<div class="tab-pane fade" id="entregables">
					<div class="row">
						<div class="span5">
							<h2>Nombre de tarea:</h2>
							<br/>
							Entregable:
							<p>
							<input class="input"name="entregable" type="text" data-provide="typeahead">
							<input class="input-file" id="fileInput" type="file">
							<a href="#" class="btn btn-warning" name="eliminar" type="sumit">Cargar</a>
						</div>
						<div class="span5" >
							<div class="page-header">
								<h1>Entregables Actuales:</h1>
								<a href="#" class="btn btn-info" name="eliminar" type="sumit" style="position:relative;left:400px">Eliminar</a>
							</div>
							<table class="table">
								<thead>
									<tr>
										<th>Sel</th>
										<th>Archivo</th>
										<th>Fecha</th>
										<th>Por:</th>
									</tr>
								</thead>
							<tbody>
								<tr>
									<td><input type="checkbox"></td>
									<td>000.html</td>
									<td>12/04/12</td>
									<td>......</td>
								</tr>
								<tr>
									<td><input type="checkbox"></td>
									<td>000.html</td>
									<td>12/04/12</td>
									<td>......</td>
								</tr>
							</tbody>
							</table>
							<a href="#" class="btn btn-warning" name="aceptar" type="sumit" style="position:relative;left:350px">Aceptar</a>
							<a href="#" class="btn btn-info" data-dismiss="modal" style="position:relative;left:360px">Cerrar</a>
						</div>
					</div>
				</div>
			</div>
		</div>
		
		
		
	
	
	<script src="Estilos/js/jquery.js"></script>
	<script src="Estilos/js/bootstrap-button.js"></script>
	<script src="Estilos/js/bootstrap-tab.js"></script>
	<script src="Estilos/js/bootstrap-modal.js"></script>
	<script src="Estilos/js/bootstrap-dropdown.js"></script>

</body>
</html>
